<template>
  <div class="course">
    <van-nav-bar
      title="知识中心"
      left-arrow
      :fixed="true"
      :placeholder="true"
      :z-index="999"
      :safe-area-inset-top="true"
      @click-left="goBack"
    />

    <div class="fileter">
      <div class="search">
        <van-search
          v-model="searchValue"
          show-action
          placeholder="请输入搜索关键词"
          background="#fff"
          @search="confirmSearch"
          @cancel="cancelSearch"
        />
      </div>
      <div class="category" @click="isShow = !isShow">
        <i class="iconfont icon-fenlei"></i>
      </div>
    </div>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="course-list">
        <div class="nodata" v-if="!loading && courseList.length == 0">
          <img src="@static/img/nodata.png" alt="" />
        </div>
        <div class="course-item" v-for="(item, index) in courseList" :key="index" @click="gotoDetail(item)">
          <div class="course-cont">
            <div class="img">
              <img :src="item.imgUrl" alt="" />
            </div>
            <div class="name">{{ item.title }}</div>
            <div class="people">
              <i class="iconfont icon-tuandui"></i>
              <span>{{ item.studentNum }}人学习</span>
            </div>
          </div>
        </div>
      </div>
    </van-list>

    <div class="category-box" :class="isShow ? 'category-show' : ''" @click.capture.self="isShow = false">
      <div class="category-list" v-if="categoryList.length">
        <Category :categories="categoryList" :categoryId="categoryId" @choiceCategory="choiceCategory"></Category>
      </div>
    </div>
  </div>
</template>

<script>
import { getCourseList, getCourseCategoryList } from '@/api/course'
import Category from './category/index.vue'
export default {
  name: 'knowledge',
  components: { Category },
  data() {
    return {
      searchValue: '',
      courseList: [],
      loading: false,
      finished: false,
      categoryList: [], // 分类列表
      isShow: false,
      page: 1,
      pageSize: 10,
      categoryId: '', // 分类id
      params: {}
    }
  },
  computed: {},
  mounted() {
    this.getCategory()
  },
  methods: {
    goBack() {
      this.$router.replace({
        path: '/index'
      })
    },
    onClick(name, title) {
      this.courseList = []
      this.page = 1
      this.finished = false
      this.loading = true
      this.onLoad()
    },
    // 选择分类
    choiceCategory(params) {
      this.courseList = []
      this.categoryId = params.id
      this.page = 1
      this.finished = false
      this.isShow = false
      this.loading = true
      this.onLoad()
    },
    // 获取课程分类列表
    getCategory() {
      getCourseCategoryList().then(res => {
        this.categoryList = res.data
        this.categoryList.unshift({
          label: '全部',
          id: ''
        })
      })
    },
    // 获取课程列表
    getCourseList() {
      this.params = {
        pageNum: this.page,
        pageSize: this.pageSize,
        categoryId: this.categoryId,
        keyword: this.searchValue
      }

      getCourseList(this.params).then(res => {
        if (res.code == '200') {
          this.courseList = this.courseList.concat(res.rows)
          this.loading = false
          if (res.rows.length < this.pageSize) {
            this.finished = true
          } else {
            if (res.rows.length == res.total) {
              this.finished = true
            } else {
              this.page++
            }
          }
        }
      })
    },
    // 确认搜索
    confirmSearch() {
      this.courseList = []
      this.page = 1
      this.finished = false
      this.loading = true
      this.onLoad()
    },
    // 取消搜索
    cancelSearch() {
      this.searchValue = ''
      this.courseList = []
      this.page = 1
      this.finished = false
      this.loading = true
      this.onLoad()
    },
    // 前往学习
    gotoDetail(item) {
      this.$router.push({
        name: 'knowledgeDetail',
        query: {
          uuid: item.uuid
        }
      })
    },
    onLoad() {
      console.log('加载')
      this.getCourseList()
    }
  }
}
</script>

<style scoped lang="less">
@import 'index';
</style>
